<template>
  <view :class="zoneType == 1 ? 'goods-item-one' : 'goods-item-two'" @click="handleClick">
    <image :src="info.imageUrl" class="item-image" mode="aspectFit"></image>
    <view class="item-content flex-1">
      <text class="font-32 font-bold text-333 pt-24" :class="zoneType == 1 ? 'text-row-2' : 'text-row-1'">{{ info.name }}</text>
      <view class="flex pt-30 items-baseline">
        <view class="sell-price">
          <text class="font-24">￥</text>
          <text class="font-42 font-bold">{{ info.sellPrice }}</text>
        </view>
        <view class="cost-price text-999 font-24 ml-6 text-line-through">￥{{ info.costPrice }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import weixin from "@/mixins/weixin"
export default {
  mixins: [weixin],
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    zoneType: {
      type: String,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    handleOnFinish() {
      this.$emit("refresh", this.info)
    },
    handleClick() {
      this.toView({
        url: "pages/mall/mall-goods-detail/mall-goods-detail",
        params: {
          mallCommodityId: this.info.mallCommodityId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-item-two {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-top: 24rpx;
  .item-image {
    width: 100%;
    height: 227rpx;
  }
  .item-content {
    padding: 0 16rpx 30rpx;
    .sell-price {
      color: #de281a;
      line-height: 1;
    }
  }
}
.goods-item-one {
  display: flex;
  flex-direction: row;
  margin-top: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .item-image {
    width: 220rpx;
    height: 220rpx;
    border-radius: 16rpx 0rpx 0rpx 16rpx;
  }
  .item-content {
    margin-left: 26rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .sell-price {
      color: #de281a;
      line-height: 1;
      padding-bottom: 20rpx;
    }
    .cost-price {
      margin-left: 14rpx;
    }
  }
}
</style>
